<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>冰墩墩</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            width: 100%;
            height: 100%;
        }
        .wrapper{
            width: 50%;
            height: 500px;
            margin: 100px auto;
            border: 1px solid #fff;
        }
        .tbody{
            width: 362px;
            height: 410px;
            border: 8px solid #000;
            border-radius: 88% 88% 62% 68%/82% 82% 95% 84%;
            margin: 30px auto;
            /* position: absolute; */
            position: relative;
            background: #fff;
        }
        .ear1,.ear2{
            width: 81px;
            height: 115px;
            border-radius: 50%;
            background: #000;
            position: absolute;
            z-index: -999;
        }
        .ear1{
            left: 600px;
            top: 140px;
            transform: rotate(-10deg);
            /* z-index: -999; */
        }
        .ear2{
            left: 850px;
            top: 140px;
            transform: rotate(10deg);
            /* z-index: -999; */
        }
        .face{
            border: 1px solid #000;
            border-radius: 48% 48% 44% 49%/53% 54% 45% 47%;
            position: absolute;
            /* position: relative; */
            
        }
        .c_blue{
            width: 280px;
            height: 224px;
            border: 5px solid blue;
            left: 620px;
            top: 190px;
        }
        .c_red{
            width: 289px;
            height: 232px;
            border: 5px solid red;
            left: 615px;
            top: 186px;
        }
        .c_purple{
            width: 298px;
            height: 240px;
            border: 5px solid purple;
            left: 610px;
            top: 182px;
        }
        .c_yellow{
            width: 305px;
            height: 246px;
            border: 5px solid yellow;
            left: 610px;
            top: 181px;
        }
        .c_green{
            width: 313px;
            height: 256px;
            border: 5px solid green;
            left: 605px;
            top: 176px;
        }
        .eye1,.eye2{
            width: 83px;
            height: 115px;
            border: 1px solid #000;
            background: #000;
            border-radius: 50%;
            position: absolute;
        }
        .eye1{
            left: 650px;
            top: 220px;
            transform: rotate(45deg);
        }
        .eye2{
            left: 800px;
            top: 220px;
            transform: rotate(-45deg);
        }
        .eye1::before,.eye2::before{
            content: '';
            width: 40px;
            height: 40px;
            border-radius: 100%;
            border: 5px solid #fff;
            position: absolute;
        }
        .eye1::before{
            left: 20px;
            top: 25px;
        }
        .eye2::before{
            left: 15px;
            top: 25px;
        }
        .eye1::after,.eye2::after{
            content: '';
            width: 10px;
            height: 10px;
            border-radius: 100%;
            background: #eee;
            position: absolute;
        }
        .eye1::after{
            left: 45px;
            top: 35px;
        }
        .eye2::after{
            left: 30px;
            top: 35px;
        }
        .nose{
            width: 28px;
            height: 18px;
            background: #000;
            border-radius: 42px 42px 60px 61px/30px 30px 50px 46px;
            position: absolute;
            left: 755px;
            top: 280px;
        }
        .mouth{
            position: absolute;
            width: 68px;
            height: 25px;
            border-radius: 48%;
            border: 7px solid #000;
            /* background: #000; */
            border-top: none;
            border-left: 0;
            border-right: 0;
            left: 735px;
            top: 300px;
        }

        .arm1,.arm2{
            background: #000;
            position: absolute;
        }
        .arm1{
            width: 75px;
            height: 118px;
            border-radius: 24% 69% 68% 75%/53% 95% 40% 50%;
            left: 530px;
            top: 350px;
            transform: rotate(40deg);
            z-index: -1;
        }
        .arm2{
            width: 75px;
            height: 148px;
            border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;
            left: 950px;
            top: 280px;
            transform: rotate(30deg);
            z-index: -1;
        }
        .arm2::before{
            content: '';
            width: 16px;
            height: 24px;
            background: red;
            border-top-left-radius: 50%; 
            border-top-right-radius: 50%;
            position: absolute;
            transform: rotate(-45deg);
            left: 34px;
            top: 30px;
        }
        .arm2::after{
            content: '';
            width: 16px;
            height: 24px;
            background: red;
            border-top-left-radius: 50%; 
            border-top-right-radius: 50%;
            position: absolute;
            transform: rotate(45deg);
            left: 40px;
            top: 30px;
        }
        .leg1,.leg2{
            width: 83px;
            height: 80px;
            background: #000;
            border-radius: 0 0 30px 30px;
            position: absolute;
            z-index: -1;
        }
        .leg1{
            left: 650px;
            top: 520px;
        }
        .leg2{
            left: 800px;
            top: 520px;
        }
        .leg1::after,.leg2::after{
            content: '';
            width: 40px;
            height: 30px;
            position: absolute;
            background-color: #000;
            border-radius: 30px;
        }
        .leg1::after{
            top: 50px;
            left: 46px;
        }
        .leg2::after{
            top: 50px;
            left: -3px;
        }
       


        .function{
            display: flex;
            margin-left: 20px;
            justify-content: space-between;
            margin-top: 50px;
            border: 1px solid #000;
        }
        
        
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="tbody"></div>
        <div class="ear1"></div>
        <div class="ear2"></div>
        <div class="face c_blue"></div>
        <div class="face c_red"></div>
        <div class="face c_purple"></div>
        <div class="face c_yellow"></div>
        <div class="face c_green"></div>
        <div class="eye1"></div>
        <div class="eye2"></div>
        <div class="nose"></div>
        <div class="mouth"></div>
        <div class="arm1"></div>
        <div class="arm2"></div>
        <div class="leg1"></div>
        <div class="leg2"></div>

        <div class="function">
            <div class="shakeEar" style="background-color: #f0f; width: 100px;text-align: center;color: #fff;"><h1>摇耳朵</h1></div>
            <div class="sayHello" style="background-color: #f40; width: 100px;text-align: center;color: #fff;"><h1>打招呼</h1></div>
            <div class="changeColor" style="background-color: #0ff; width: 100px;text-align: center;color: #fff;"><h1>换新装</h1></div>
            <div class="hello" style="display: none;">hello,My name is BingDunDun</div>
        </div>
        <h2 style="text-align: center;">2月14日情人节，和冰墩墩一起过！！！</h2>
        <div class="heart">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>
    <script  src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <script>
        
    $(function(){
        $(".shakeEar").on('click',function(){
            $('.ear1').css('transform','rotate(10deg)');
            $('.ear2').css('transform','rotate(-10deg)');
            
            
        })
        $(".sayHello").on('click',function(){
            $('.arm2').css('transform','rotate(50deg)');
            $('.hello').show('slow');
            
        })
        $(".changeColor").on('click',function(){
            $('.tbody').css('background','red');
            
            
        })
    })
    // </script>
    
</body>
</html>
<style>
    body{
        width: 100%;
    }
    .heart{
        width: 200px;
        height: 200px;
        /* background: #f0f; */
        margin: 20px auto;
        /* display: flex; */
        /* float: left; */
        animation: beat 1s linear infinite alternate;
    }
    
    .left,.right{
        float: left;
        width: 100px;
        height: 160px;
        background: #f99;
        border-radius: 50px 50px 0px 0px;
        box-shadow: 0px 0px 20px 0px #f99;
        
    }
    .left{
        /* border-radius: 50px 50px 0px 0px; */
        transform: translateX(29px) rotate(-45deg);
        /* transform: rotate(-45deg); */
    }
    .right{
        
        transform: translateX(-29px) rotate(45deg);
        /* transform: rotate(45deg); */
    }
    @keyframes beat{
        0%{
            transform: scale(1);
        }
        100%{
            transform: scale(1.2);
        }
    }
    .hello{
        position: absolute;
        left:1100px;
        top: 300px;
        font-size: 30px;
    }

</style>